<template>
  <!-- 补卡弹窗 -->
  <Dialog
    v-model="dialogVisible"
    :title="`${currentType === 'enter' ? '入园' : '出园'}补卡`"
    :close-on-click-modal="false"
  >
    <el-form ref="reissueFormRef" :model="reissueForm" label-width="80px">
      <!-- <el-form-item label="补卡日期" required>
        <el-date-picker
          v-model="reissueForm.date"
          type="date"
          value-format="x"
          placeholder="选择日期"
        />
      </el-form-item> -->

      <!-- <el-form-item label="补卡类型" required>
        <el-radio-group v-model="reissueForm.type">
          <el-radio label="enter">入园</el-radio>
          <el-radio label="exit">出园</el-radio>
        </el-radio-group>
      </el-form-item> -->

      <el-form-item label="补卡儿童" required>
        <el-select v-model="reissueForm.studentId" filterable placeholder="请选择儿童">
          <el-option
            v-for="child in childrenList"
            :key="child.id"
            :label="child.studentName"
            :value="child.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitReissue">确认补卡</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { StudentApi } from '@/api/school/student'
import { DeviceGateRecordApi } from '@/api/school/smartDevice/gateRecord/index'

const emit = defineEmits(['success'])
// 弹窗相关状态
const dialogVisible = ref(false)
const currentType = ref('enter')
const childrenList: any = ref([])

const reissueFormRef = ref()
// 补卡表单
const reissueForm: any = reactive({
  studentId: undefined
})
const classId: any = ref('')
// 显示补卡弹窗
const open = async (type, id) => {
  resetForm()
  if (classId) {
    classId.value = id
    try {
      childrenList.value = await StudentApi.getSimpleStudentList(id)
    } catch (error) {
      console.log(error)
    }
  }
  currentType.value = type
  reissueForm.type = type
  dialogVisible.value = true
}

// 提交补卡
const submitReissue = async () => {
  console.log('补卡信息:', reissueForm)
  await reissueFormRef.value.validate()
  // 这里添加API调用逻辑
  try {
    await DeviceGateRecordApi.createDeviceGateRecord({
      // id: classId.value,
      status: currentType.value === 'enter' ? 0 : 1,
      studentId: reissueForm.studentId
    })
    dialogVisible.value = false
    ElMessage.success('补卡操作成功')
    emit('success')
  } catch (error) {}
}
const resetForm = () => {
  reissueForm.studentId = undefined
}
defineExpose({
  open
})
</script>
<style lang="scss" scoped></style>
